<template>
  <van-row class="balance">
    <van-col span="24" class="title">账户余额</van-col>
    <van-col span="24" class="info">金额： {{ Number(user_info.integral).toFixed(2) }}</van-col>
  </van-row>
  <van-tabs v-model:active="formData.active" @click="TabChange">
    <van-tab v-for="(item, index) in tabList" :key="index" :title="item.tile">
    </van-tab>
  </van-tabs>
  <!-- <van-pull-refresh v-model="formData.refreshing" @refresh="onRefresh" v-if="recordList.length>0"> -->
  <van-list v-model:loading="formData.loading" :finished="formData.finished" finished-text="没有更多了" @load="onload">
    <div class="trans-warp">
      <div class="item-warp" v-for="(item, index) in recordList" :key="index">
        <van-row justify="space-between">
          <van-col span="12" class="title">{{ item.sourceDesc }}</van-col>
          <van-col span="12" class="right yellow">￥ {{ item.integral }}</van-col>
        </van-row>
        <van-row justify="space-between" class="margin">
          <van-col span="12" class="time">{{ item.createTime }}</van-col>
          <van-col span="12" class="right time">账户余额 {{ numFilter(item.surplusIntegral) }} 元</van-col>
        </van-row>
      </div>
    </div>
  </van-list>
  <!-- </van-pull-refresh> -->
  <!-- <van-empty :image="require('@/assets/image/none.png')" description="暂无记录" v-if="recordList.length <= 0" /> -->
</template>
<script>
import { ref, defineComponent, reactive, onMounted, toRefs, nextTick, computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router"
import { jiaoyirecode, Useripage, integralLog } from "@/api/public";
import { Dialog, Toast } from "vant";
import { stringNum, formatPhoneNumber } from "@/utils/phone";
export default {
  setup(props) {
    const store = useStore();
    const router = useRouter()
    const formData = reactive({
      active: 0,
      refreshing: false,
      loading: false,
      finished: false,
      pageSize: 2,
      pageNum: 1,
      total: 0,
      type: null,
    })
    const recordList = ref([])
    const onRefresh = () => {
      formData.finished = false
      formData.pageNum = 1
      recordList.value = []
      formData.refreshing = false
      onload()
    }
    const TabChange = async (e) => {
      recordList.value = []
      formData.loading = true
      formData.finished = false
      formData.pageNum = 1
      formData.type = e
      console.log(e, "00")
      onload()
    }
    const numFilter = (value) => {
      // console.log(value)
      const realVal = parseFloat(value).toFixed(2);
      return realVal;
    }
    const onload = async () => {
      const data = {
        pageSize: formData.pageSize,
        pageNum: formData.pageNum,
      }


      if (formData.type == 1) {
        const res = await jiaoyirecode(data)
        formData.loading = false
        formData.pageNum++
        formData.total = res.data.data.total
        recordList.value = recordList.value.concat(res.data.data.records)
        if (formData.total <= recordList.value.length) {
          formData.finished = true;
          console.log('不加载')
        }
        formData.loading = false
      } else if (formData.type == 2) {
        const result = await Useripage(data)
        formData.loading = false
        formData.pageNum++
        formData.total = result.data.data.total
        recordList.value = recordList.value.concat(result.data.data.records)
        if (formData.total <= recordList.value.length) {
          formData.finished = true;
          console.log('不加载')
        }
        formData.loading = false
      } else {
        const e = await integralLog(data)
        formData.loading = false
        formData.pageNum++
        formData.total = e.data.data.total
        recordList.value = recordList.value.concat(e.data.data.records)
        if (formData.total <= recordList.value.length) {
          formData.finished = true;
          console.log('不加载')
        }
        formData.loading = false
      }


    }
    const user_info = computed(() => {
      return store.getters.user_info
    })
    const tabList = reactive([
      {
        tile: "全部",
        id: 0,
      },
      {
        tile: "充值",
        id: 1,
      }, {
        tile: "提现",
        id: 2,
      }
    ])
    onMounted(async () => {
      // onload()
      await store.dispatch('user/getUserAll')
    })
    return {
      numFilter,
      TabChange,
      recordList,
      onRefresh,
      onload,
      user_info,
      tabList,
      formData
    }

  }
}
</script>
<style lang="less" scoped>
.balance {
  margin: 30px 21px;
  width: 708px;
  height: 188px;
  background: linear-gradient(90deg, #f0dbb2, #fef4d3);
  border-radius: 20px;

  .title {
    height: 33px;
    font-size: 34px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #444442;
    margin: 49px 0px 0px 20px;
  }

  .info {
    margin: 0px 0px 0px 20px;
    height: 43px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #282a2c;
  }
}

&:deep(.van-tabs__nav) {
  background: transparent;
}

&:deep(.van-tab) {
  font-size: 31px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.8;
}

&:deep(.van-tab--active) {
  .van-tab__text {
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #3d94ff;
    line-height: 30px;

    background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

&:deep(.van-tabs__line) {
  background: url('../../../assets/image/tab-active.png');
  background-size: 100% 100%;
  bottom: 40px !important;
}

.trans-warp {
  .item-warp {
    padding: 30px 20px;
    background: #282a2c;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.35);
    border-radius: 20px;
    margin: 20px 20px 0px;

    .right {
      text-align: right;
    }

    .title {
      font-size: 34px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }

    .time {
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: 300;
      color: #ffffff;
      margin-top: 18px;
    }

    .yellow {
      font-size: 34px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>